<template>
  <el-form inline>
    <el-form-item label="一级分类">
      <el-select v-model="category1Id" placeholder="请选择" :disabled="isDisabled">
        <el-option  
          v-for="c1 in categoryStore.category1List"
          :key="c1.id"
          :label="c1.name"
          :value="c1.id"
          
        />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="category2Id" placeholder="请选择" :disabled="isDisabled">
        <el-option v-for="c2 in categoryStore.category2List" :key="c2.id" :label="c2.name" :value="c2.id" /> 
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="categoryStore.category3Id" placeholder="请选择" :disabled="isDisabled">
        <el-option
          v-for="c3 in categoryStore.category3List"
          :key="c3.id"
          :label="c3.name"
          :value="c3.id"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
export default {
  name: "App",
};
</script>
<script lang="ts" setup>
//引入分类的仓库对象
import {useCategoryState} from '@/stores/category'
//引入onMounted 和 computed
import {onMounted,computed} from 'vue'
//获取分类仓库对象
// import { ref } from 'vue'
const categoryStore  = useCategoryState()
//页面加载完毕后获取一级分类列表数据
onMounted(()=>{
    categoryStore.getCategory1List()
})
//计算属性一级分类id
const category1Id = computed({
    get(){
        return categoryStore.getCategory1Id as number
    },
    set(val:number){
        //直接获取二级分类的数据
        categoryStore.getCategory2List(val)
    }
})
//计算属性二级分类id
const category2Id = computed({
    get(){
        return categoryStore.getCategory2Id as number
    },
    set(val:number){
        //直接获取三级分类数据
        categoryStore.getCategory3List(val)
    }
})
//
//接受父级传进来的数据
 defineProps({
    isDisabled  :{
        type:Boolean,
        default:false
    }
 })


</script>
<style scoped>
</style>